<template>
  <div>
    <!-- 遍历数组 -->
    <ul>
      <li v-for="(num, index) in numbers">{{ num }} => {{ index }}</li>
    </ul>
    <!-- 遍历对象数组 -->
    <div class="goods-list">
      <div class="goods-item" v-for="(good, index) in goodsList" :key="good.id">
        <p>id= {{ good.id }}</p>
        <p>name= {{ good.name }}</p>
        <p>price= {{ good.price }}</p>
      </div>
    </div>
    <!-- 遍历对象 -->
    <div class="obj" v-for="(value,key,index) in person">
      <p>{{ key }}: {{ value }} : {{ index }}</p>
    </div>
  </div>

</template>

<script setup>
import { ref } from 'vue'

// 数组
const numbers = ref([1, 2, 3, 4, 5])
// 对象
const person = ref({
  name: '张三',
  age: 18
})
// 商品列表
const goodsList = ref([
  { id: 1, name: '苹果', price: 5 },
  { id: 2, name: '香蕉', price: 2 },
  { id: 3, name: '橘子', price: 3 }
])
</script>

<style scoped>
.goods-list {
  display: flex;
}

.goods-item {
  width: 200px;
  height: 200px;
  margin-right: 10px;
}
</style>